<template>
  <div>
    <Table :data="applyData" :columns="columns" />
    <Page style="margin-top: 10px" :total="total" :current="curPage" :page-size="pageSize" @on-change="changePage" />
  </div>
</template>

<script>
import Api from '@/api/stocks'
import dayjs from 'dayjs'

export default {
  name: "review",
  data () {
    return {
      applyData: [],
      columns: [
        { title: 'ID', key: 'id',align: 'center' },
        { title: '申请订单编号', key: 'inputFormNum',align: 'center' },
        { title: '申请人ID', key: 'requestManId',align: 'center' },
        { title: '申请描述', key: 'instruction',align: 'center' },
        { title: '申请金额', key: 'allowTotal',align: 'center' },
        {
          title: '申请状态',
          key: 'formStatus',
          align: 'center',
          render: (h, params) => {
            const status = {
              1: '申请未处理',
              2: '退回修改',
              3: '审批通过',
              4: '商品已入库'
            }
            return h('span', status[params.row.formStatus])
          }
        },
        {
          title: '申请时间',
          align: 'center',
          render: (h, params) => {
            return h('span', dayjs(params.row.createTime).format('YYYY-MM-DD'))
          }
        },
        {
          title: '操作',
          width: '300',
          align: 'center',
          render: (h, params) => {
            const status = params.row.formStatus
            const agree = h(
                'Button',{
                  style: {},
                  props: {
                    type: 'success',
                    disabled: status === 4
                  },
                  on: {
                    click: () => {
                      this.review(params.row.id, 2)
                    }
                  }
                },'同意'
            )
            const back = h(
                'Button',{
                  style: {
                    marginLeft: '5px'
                  },
                  props: {
                    type: 'warning',
                    disabled: status === 4
                  },
                  on: {
                    click: () => {
                      this.review(params.row.id, 1)
                    }
                  }
                },'退回'
            )
            const reject = h(
                'Button',{
                  style: {
                    marginLeft: '5px'
                  },
                  props: {
                    type: 'error',
                    disabled: status === 4
                  },
                  on: {
                    click: () => {
                      this.review(params.row.id, 0)
                    }
                  }
                },'拒绝'
            )
            return h('div', [agree, back, reject])
          }
        }
      ],
      pageSize: 20,
      curPage: 1,
      total: 0,
      formItem: {},
      context: ''
    }
  },
  mounted () {
    this.list()
  },
  methods: {
    list () {
      Api.applyList({ pageSize: this.pageSize, curPage: this.curPage }).then(res => {
        const req = res.data
        if (req.resultCode !== 200) {
          this.$Message.error(req.message)
        }
        this.total = req.data.total
        this.applyData = req.data.result
      })
    },
    changePage (i) {
      this.curPage = i
      this.list()
    },
    review (id, status) {
      const des = {
        0: '拒绝',
        1: '退回',
        2: '同意'
      }
      this.$Modal.confirm({
        title: `确认${des[status]}?`,
        render: (h) => {
          return h('Input', {
            props: {
              value: this.context,
              placeholder: '请输入批语'
            },
            on: {
              input: (val) => {
                this.context = val;
              }
            }
          })
        },
        onOk: () => {
          Api.review({id, status, context: this.context}).then(res => {
            console.log(res)
            this.list()
          })
        }
      })
      this.context = ''
    }
  }
}
</script>

<style scoped>

</style>
